window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    console.log(preview_img);
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1.当我们鼠标经过preview_img就显示与隐藏mask和big大盒子
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    preview_img.addEventListener('mousemove', function (e) {
        // 1.先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // 2.减去盒子高度300的一半是150就是我们mask的最终left和top值了
        // 3.mask移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 4.如果x坐标小于0就停在0的位置
        // 遮罩层的最大移动距离
        var maskWidthMax = preview_img.offsetWidth - mask.offsetWidth;
        var maskHeightMax = preview_img.offsetHeight - mask.offsetHeight;
        if (maskX <= 0) {
            maskX = 0;
        }
        else if (maskX >= maskWidthMax) {
            maskX = maskWidthMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        }
        else if (maskY >= maskHeightMax) {
            maskY = maskHeightMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
        // 大图
        var bigImg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigWidthMax = bigImg.offsetWidth - big.offsetWidth;
        var bigHeightMax = bigImg.offsetHeight - big.offsetHeight;
        // var bigHeightMax = big.offsetHeight - bigImg.offsetHeight;
        // 大图片的移动距离
        var bigx = maskX * bigWidthMax / maskWidthMax;
        var bigy = maskY * bigHeightMax / maskHeightMax;
        bigImg.style.left = -bigx + 'px';
        bigImg.style.top = -bigy + 'px';
    })
})